<!DOCTYPE html >
<html lang="en"  xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quartz</title>
    <!-- import CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{base/element-ui/index.css(v=${version})}"/>
    <!--element-ui 图标 css-->
    <link rel="stylesheet" type="text/css" th:href="@{base/element-ui/docs.01dc62b.css(v=${version})}"/>
    <link rel="stylesheet" type="text/css" th:href="@{base/element-ui/element-ui.a29bd8f.css(v=${version})}"/>
</head>
<style>
.is-selected {
    color: #1989FA;
}
.job-search {
    float: left;
    width: 50%
}
</style>
<body>
<div id="app">
    <!--任务日历-->
    <el-calendar>
        <!--刷新当前页面-->
        <router-view v-if="isRouterAlive"></router-view>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template
                slot="dateCell"
                slot-scope="{date, data}">
            <!--<p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
            </p>-->
            <!--这里原本有动态绑定的class，去掉-->
                <div class="task-name__detail">
                    {{ data.day.split('-').slice(1).join('-') }}
                </div>
            <div class="task-name__detail">
                <el-button size="mini" @click="editDrawer = true; getQuartzOne(-1)" class="el-icon-edit"></el-button>
            </div>
            <!--这里遍历当天的任务记录-->
                <div class="task-name__detail"
                     v-for="(item, index) in dealMyDate(data.day)"
                     :key="index">
                    <el-button size="mini" @click="tableDrawer = true; getQuartzList(data.day)"  class="el-icon-more"></el-button>
                </div>

        </template>
    </el-calendar>
    <!--任务列表-->
    <el-drawer
            title="任务列表"
            :visible.sync="tableDrawer"
            direction="rtl"
            size="60%">
        <el-col>
            <el-input class="job-search" placeholder="请输入任务名称" v-model="inputJobName" prefix-icon="el-icon-search"  clearable> </el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button  @click="queryQuartz()" icon="el-icon-search" circle ></el-button>
        </el-col>
        <el-table :data="taskData" :key="Math.random()">
            <el-table-column property="cornId" label="ID" hidden="hidden" width="50">
            </el-table-column>
            <el-table-column property="type" label="类型" width="50" :formatter="typeFormatter">
<!--                <template slot-scope="scope">-->
<!--                    <div>{{scope.row.type === '1' ? '常规' : '特殊'}}</div>-->
<!--                </template>-->
            </el-table-column>
            <el-table-column property="jobGroup" label="任务组" width="150"></el-table-column>
            <el-table-column property="jobName" label="任务名称" width="150"></el-table-column>
            <el-table-column property="invokeParam" label="任务参数" width="150"></el-table-column>
            <el-table-column property="quartzTime" label="定时时间" width="150"></el-table-column>
            <el-table-column property="status" label="状态" width="80" :formatter="statusFormatter">
                <!--<template slot-scope="scope">
                    <div>{{scope.row.status === '1' ? '待执行' : '已执行'}}</div>
                </template>-->
            </el-table-column>
            <el-table-column property="cornId" label="编辑" width="100">
            <template slot-scope="scope">
                <el-button @click="detailDrawer = true; getQuartzOne(scope.row.cornId)" type="primary">编 辑</el-button>
            </template>
        </el-table-column>
            <el-table-column property="cornId" label="删除" width="100">
                <template slot-scope="scope">
                    <el-button @click="removeQuartz(scope.row.cornId)" type="primary" >删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
     <div>
        <!--任务详情-->
         <el-drawer
                 title="任务详情"
                 :append-to-body="true"
                 :before-close="handleClose"
                 :visible.sync="detailDrawer"
                 ref="drawer">
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="ID" :label-width="formLabelWidth" hidden="hidden">
                        <el-col :span="5">
                            <el-input v-model="form.cornId" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-col :span="8">
                        <el-select v-model="form.type" placeholder="请选择类型" >
                            <el-option label="常规" value="1"></el-option>
                            <el-option label="特殊" value="2"></el-option>
                        </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="任务组" :label-width="formLabelWidth">
                        <el-col :span="12">
                        <el-input v-model="form.jobGroup" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="任务名称" :label-width="formLabelWidth">
                        <el-col :span="16">
                        <el-input v-model="form.jobName" autocomplete="off" placeholder="请输入任务名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="参数" :label-width="formLabelWidth">
                        <el-col :span="16">
                        <el-input v-model="form.invokeParam" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="定时时间" :label-width="formLabelWidth">
                        <el-col :span="12">
                        <el-input v-model="form.quartzTime" autocomplete="off" placeholder="请输入定时时间"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-col :span="8">
                        <el-select v-model="form.status" placeholder="请选择状态" >
                            <el-option label="待执行" value="1"></el-option>
                            <el-option label="已执行" value="2"></el-option>
                        </el-select>
                    </el-col>
                    </el-form-item>
                    <el-form-item label="执行时间" :label-width="formLabelWidth">
                        <el-col :span="12">
                            <el-input v-model="form.executeEndTime" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
         </div>
    </el-drawer>

    <!--任务编辑-->
    <el-drawer
            title="任务编辑"
            :append-to-body="true"
            :before-close="handleEditClose"
            :visible.sync="editDrawer"
            ref="drawer">
        <div class="demo-drawer__content">
            <el-form :model="form">
                <el-form-item label="ID" :label-width="formLabelWidth" hidden="hidden">
                    <el-col :span="5">
                        <el-input v-model="form.cornId" autocomplete="off" value="-1"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-col :span="8">
                        <el-select v-model="form.type" placeholder="请选择类型">
                            <el-option label="常规" value="1"></el-option>
                            <el-option label="特殊" value="2"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="任务组" :label-width="formLabelWidth">
                    <el-col :span="12">
                        <el-input v-model="form.jobGroup" autocomplete="off"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                    <el-col :span="16">
                        <el-input v-model="form.jobName" autocomplete="off" placeholder="请输入任务名称"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="参数" :label-width="formLabelWidth">
                    <el-col :span="16">
                        <el-input v-model="form.invokeParam" autocomplete="off"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="定时时间" :label-width="formLabelWidth">
                    <el-col :span="12">
                        <el-input v-model="form.quartzTime" autocomplete="off" placeholder="请输入定时时间"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelEditForm">取 消</el-button>
                <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
        </div>
    </el-drawer>
</div>
</body>
<!-- import Vue before Element -->
<script th:src="@{base/element-ui/vue.js(v=${version})}"></script>
<!-- import element-ui -->
<script th:src="@{base/element-ui/index.js(v=${version})}"></script>
<!-- import Axios -->
<script th:src="@{base/element-ui/axios/axios.js(v=${version})}"></script>
<!-- import cron-validator -->
<script th:src="@{base/element-ui/cron-validator/index.js(v=${version})}"></script>
<script th:src="@{note/task/task.js(v=${version})}"></script>
</html>